<template>
  <div>
    <div class="Hellcomend-title">热销推荐</div>
    <ul>
      <li class="itemli border-bottom" v-for="(item, index) of recommendList" :key="index">
        <img class="item-img" :src="item.img" />
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}条评论</p>
          <p class="item-right">距离{{item.distance}}M</p>
          <button class="item-but">查看详情</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Hellcomend",
  data() {
    return {
      recommendList: [
        {
          id: "001",
          img: require("../assets/img/rm1.jpg"),
          title: "长隆野生动物世界",
          desc: "158686",
          distance:"23",
        },
        {
          id: "002",
          img: require("../assets/img/rm2.jpg"),
          title: "广州长隆国际大马戏",
          desc: "158686",
          distance:"122",
        },
        {
          id: "003",
          img: require("../assets/img/rm3.jpg"),
          title: "长隆欢乐世界",
          desc: "158686",
          distance:"23",
        },
        {
          id: "004",
          img: require("../assets/img/rm4.jpg"),
          title: "广州塔",
          desc: "158686",
          distance:"93",
        },
        {
          id: "005",
          img: require("../assets/img/rm5.jpg"),
          title: "长隆水上乐园",
          desc: "158686",
          distance:"323",
        },
        {
          id: "006",
          img: require("../assets/img/rm6.jpg"),
          title: "广州长隆旅游度假区",
          desc: "158686",
          distance:"223",
        },
        {
          id: "007",
          img: require("../assets/img/rm7.jpg"),
          title: "广州正佳极地海洋世界",
          desc: "158686",
          distance:"723",
        },
        {
          id: "008",
          img: require("../assets/img/rm8.jpg"),
          title: "广州长隆酒店白虎餐厅",
          desc: "158686",
          distance:"923",
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.Hellcomend-title {
  margin-top: 0.1rem;
  line-height: 0.8rem;
  font-size: 18px;
  font-weight: bold;
  color: #000;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  text-indent: 0.2rem;
}
.itemli {
  overflow: hidden;
  display: flex;
  height: 1.9rem;
  .item-img {
    border-radius: 0.06rem;
    height: 1.7rem;
    padding: 0.1rem;
  }
  .item-info {
    flex: 1;
    padding: 0.1rem;
    min-width: 0;
    .item-title {
      line-height: 0.54rem;
      font-size: 0.32rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .item-desc {
      line-height: 0.4rem;
      color: #ccc;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .item-but {
      background-color: #ff9300;
      line-height: 0.44rem;
      color: #fff;
      padding: 0 0.2rem;
      margin-top: 0.16rem;
      border-radius: 0.06rem;
    }
    .item-right{
      float: right;
      text-align: right;
    }
  }
}
</style>